﻿<div id="OffersContainer" class="center">
    <div class="offers-header">
        <img class="banner" src="/Content/Images/Plugins/banner.png">
        <img class="office-title" src="/Content/Images/Plugins/office365-logo.png">
    </div>
    <div class="offers-main-title main-title-text">
        <label>@Resources.OffersMainTitle</label>
    </div>
    <table cellspacing="0">
        <tbody>
            <tr>
                <td colspan="4"></td>
                <td class="most-popular-cell">
                    <label>@Resources.MostPopular</label>
                </td>
                <td colspan="4"></td>
            </tr>
            <tr>
                <!-- ko foreach: offers -->
                <td class="spacer-cell"></td>
                <td class="offer-cell">
                    <label data-bind="html: Title" class="offer-main-title title-text"></label><br />
                    <label data-bind="html: SubTitle" class="offer-subtitle subtitle-text"></label><br />
                    <a target="_blank" data-bind="attr: { href: LearnMoreUrl } " class="learn-more link">@Resources.LearnMore</a><br />

                    <img data-bind="attr: { src: Icon }" class="offer-icon" />

                    <div class="offer-features">
                        <!-- ko foreach: Features -->
                        <label data-bind="text: $data" class="medium-text"></label><br />
                        <!-- /ko -->
                    </div>

                    <label class="offer-price, emphasized-text">@Resources.CurrencySymbol</label>
                    <label data-bind="text: Price" class="offer-price emphasized-text"></label><br />
                    <a data-bind="click: $parent.onBuyNowClicked" class="buy-now link">@Resources.BuyNow</a>
                </td>
                <td class="spacer-cell"></td>
                <!-- /ko -->
            </tr>
        </tbody>
    </table>

    <div class="footer">
        <a href="#" target="_blank" class="link about">@Resources.About</a>
        <a href="#" target="_blank" class="link support">@Resources.Support</a>
        <label class="copy-right">@Resources.CopyRight</label>
    </div>
</div>